<template>
  <div class="qa-trakcer-root info-root">
    <div class="info-title">
      Tracker 链路追踪
    </div>
    <div class="info-content">
      <div class="span-type-container">
        <div><span>HTTP_GATEWAY </span>
          <div class="span-type-gateway"> </div>调用网关
        </div>
        <div><span>HTTP_GATEWAY_INVOKE</span>
          <div class="span-type-httpmvc"> </div>Rest 节点, 被网关调用
        </div>
        <div><span>HTTP_MVC </span>
          <div class="span-type-httpmvc"> </div>Rest 节点, 直接调用
        </div>
        <div><span>HTTP_FEIGN_INVOKE </span>
          <div class="span-type-httpfeign"> </div>Rest 节点, 被Feign调用
        </div>
        <div><span>HTTP_OKHTTP_INVOKE </span>
          <div class="span-type-okhttp-invoke"> </div>Rest 节点, 被OKHttp工具调用
        </div>
        <div><span>HTTP_OKHTTP </span>
          <div class="span-type-okhttp"> </div>使用 OKHttp 调用其他
        </div>
        <div><span>ANNOTATION </span>
          <div class="span-type-annotation"> </div>@TrackerStart 注解标识内部节点
        </div>
        <div><span>SPRING_ASYNC </span>
          <div class="span-type-springasync"> </div>Spring 异步线程
        </div>
        <div><span>ELASTIC_SEARCH </span>
          <div class="span-type-elasticsearch"></div>请求 ElasticSearch
        </div>
        <div><span>REDIS </span>
          <div class="span-type-redis"> </div>请求 Redis
        </div>
        <div><span>MYSQL </span>
          <div class="span-type-mysql"> </div>请求 MySQL
        </div>
        <div><span>OTHER </span>
          <div class="span-type-other"> </div>其他节点
        </div>
        <div><span>Oms Node </span>
          <div class="span-type-placeholder"> </div>耗时[&lt;1ms]的节点, 宽度为1
        </div>
        <!--              <div><span>VIRTUAL            </span><div class="span-type-virtual">      </div>虚拟节点</div>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.qa-trakcer-root {
  @include box(100%, 100%);

  .span-type-container {
    @include flex(column, flex-start, flex-start);
    color: var(--el-text-color-regular);
    font-size: 12px;

    &>div {
      @include flex(row, flex-start, center);
      font-family: Consolas, Menlo, sans-serif;
      margin: 2px 0;

      span {
        width: 140px;
      }

      div {
        @include box(120px, 15px);
        box-shadow: 3px 3px 5px 0px rgba(107, 104, 104, 0.3);
        border-radius: 5px;
        margin-right: 10px;
      }
    }

    .span-type-gateway {
      background-image: linear-gradient(to right, #5DCB6A, #00780d);

      [class="dark"] & {
        background-image: linear-gradient(to right, #008610, #003506);
      }
    }

    .span-type-httpmvc {
      @include themeBg(#9dcb21, #9ECB2182);
    }

    .span-type-httpfeign {
      @include themeBg(#66c855, #587113);
    }

    .span-type-springasync {
      background-image: linear-gradient(to right, #5DCB6A, #d2b354);

      [class="dark"] & {
        background-image: linear-gradient(to right, #9ECB2182, #A47B00);
      }
    }

    .span-type-redis {
      @include themeBg(#ce6a60, #aa4d45);
    }

    .span-type-annotation {
      @include themeBg(#d2b354, #A47B00);
    }

    .span-type-mysql {
      @include themeBg(#66b5cb, #005572);
    }

    .span-type-other {
      @include themeBg(#C1C1C1, #525252);
    }

    .span-type-virtual {
      @include themeBg(#929292, #525252);
    }

    .span-type-placeholder {
      @include themeBg(#ffffff, #000000);
      @include themeBorder(1px, #000000, #e2e2e2);
      box-sizing: border-box;
      border-style: dashed;
    }

    .span-type-elasticsearch {
      background-image: linear-gradient(to right, #00bfb3, #1ba9f5, #fec514);

      [class="dark"] & {
        background-image: linear-gradient(to right, #009188, #147eb7, #aa840d);
      }
    }

    .span-type-okhttp {
      background-image: linear-gradient(to right, #ee9943, #8689e3);

      [class="dark"] & {
        background-image: linear-gradient(to right, #905c28, #454776);
      }
    }

    .span-type-okhttp-invoke {
      background-image: linear-gradient(to left, #ee9943, #8689e3);

      [class="dark"] & {
        background-image: linear-gradient(to left, #905c28, #454776);
      }
    }

    .qa-gw-desc {
      :deep(.el-descriptions__body) {
        background-color: inherit;
      }

      :deep(.el-descriptions__label) {
        color: var(--el-text-color-regular);
        font-weight: bold;
      }
    }

  }
}
</style>